<template>
	<view class="native-gameplay-container">
		<view class="header">
			<view class="header-top">
				<view class="header-top-left">
					<u-icon name="arrow-left" color="#000" size="22" @click="onBack()"></u-icon>
					<image class="header-top-left-titleImage" src="@/static/index/native-gameplay/headerTitle.png"
						mode="aspectFit">
					</image>
					<view class="header-top-left-address">
						<view class="header-top-right-location"> 淮安市 </view>
					</view>
					<image class="clickDown" src="@/static/index/native-gameplay/down.png" mode=""></image>
				</view>
				<view class="header-top-right">
					<view class="weather-left">
						33
					</view>
					<view class="weather-middle">
						<view class="weather-middle-top">
							/28℃
						</view>
						<view class="weather-middle-bottom">
							烈日炎炎
						</view>
					</view>

					<view class="weather-right">
						<image src="/static/index/native-gameplay/SunnyDay.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="middle-search">
				<!-- <u--input class="middle-search-ipt" placeholder="搜索更多景点、美食、活动等" prefixIcon="search"
						prefixIconStyle="font-size: 44rpx;color: #4D4D56;padding:0 20rpx 0 30rpx"
						placeholderStyle="font-size: 26rpx;color: #4D4D56;font-weight:400" border="none"></u--input> -->
				<view class="middle-search-box">
					<view class="middle-search-box-top">
						<u-icon name="search" color="#000" size="22"></u-icon>
					</view>
					<view class="">
						搜索更多景点、美食、活动等
					</view>
				</view>
			</view>

			<!-- 热门标签 -->
			<view class="PopularTags">
				<u-scroll-list :indicator="false" style="padding-bottom: 0;">
					<view v-for="(item, index) in list" :key="index">
						<view class="PopularTags-tab">
							{{item.name}}
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>

		<!-- 1. 顶部堆叠轮播 -->
		<swiper class="hot-swiper" circular :current="swiperCurrent" @change="swiperChange" previous-margin="30rpx"
			next-margin="30rpx">
			<swiper-item v-for="(item, index) in hotList" :key="item.id">
				<view class="swiper-item-wrapper" :class="{'is-active': index === swiperCurrent}"
					@click="$emit('itemClick', item)">
					<image class="swiper-image" :src="item.image" mode="aspectFill"></image>

					<!-- 顶部热度标签 -->
					<view class="hotness-indicator">
						<text class="indexIconFont icon-tzwf-rd"></text>
						<text>热度{{ item.hotness | formatLikes}}</text>
					</view>

					<!-- 顶部收藏图标 -->
					<view class="favorite-icon">
						<u-icon name="star-fill" color="#FFD44F" size="24"></u-icon>
					</view>

					<!-- 黑色渐变遮罩层 -->
					<view class="info-overlay"></view>

					<!-- 底部信息卡片容器 -->
					<view class="info-container">
						<!-- 作者信息药丸 -->
						<view class="author-pill">
							<view class="author-info">
								<image class="author-avatar" :src="item.author.avatar" mode="aspectFill"></image>
								<text class="author-name">{{ item.author.name }}</text>
							</view>
							<view class="location-info">
								<text class="indexIconFont icon-dingwei"></text>
								<text class="location-text">{{ item.location || '淮安西游乐园' }}</text>
							</view>
						</view>
						<!-- 标题卡片 -->
						<view class="title-card">
							<text class="swiper-title">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 标签选项卡 -->
		<view class="tabsList" style="background-color: #fff;">
			<view class="tabsList-item" v-for="(item,index) in tabsList" :key="index" @click="handleClickTabs(item)">
				<view class="tabsList-item-img">
					<image :src="item.selected ? item.imgUrl : item.imgUrl_hidden" mode=""></image>
					<!-- <image :src="item.imgUrl_hidden" mode=""></image> -->
				</view>
				<view class="tabsList-item-title"
					:class="item.selected ? 'tabsList-item-title-show' : 'tabsList-item-title-hidden'">
					{{item.name}}
				</view>
				<view class="tabsList-item-top" v-if="item.selected">
					<image src="/static/index/native-gameplay/go.png" mode=""></image>
				</view>
			</view>
		</view>


		<!-- 2. 下方瀑布流 (复用现有组件) -->
		<waterfall-posts :left-list="leftList" :right-list="rightList"
			:active-long-press-post-id="activeLongPressPostId" @itemClick="item => $emit('itemClick', item)"
			@like="item => $emit('like', item)" @longPress="id => $emit('longPress', id)"
			@touchEnd="$emit('touchEnd')" />

		<!-- 3. 加载更多提示 -->
		<u-loadmore :status="loadStatus" bg-color="#f8f8f8" />
	</view>
</template>

<script>
	// 引入已有的瀑布流组件，实现复用

	export default {
		name: "NativeGameplay",
		components: {
			WaterfallPosts
		},
		props: {
			// 轮播图数据
			hotList: {
				type: Array,
				default: () => []
			},
			// 瀑布流左侧列表数据
			leftList: {
				type: Array,
				default: () => []
			},
			// 瀑布流右侧列表数据
			rightList: {
				type: Array,
				default: () => []
			},
			// 长按帖子的ID，用于显示特效
			activeLongPressPostId: {
				type: [String, Number],
				default: null
			},
			// 加载状态: 'loadmore', 'loading', 'nomore'
			loadStatus: {
				type: String,
				default: 'loadmore'
			}
		},
		data() {
			return {
			
			};
		},
	
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
	
</style>